import React from 'react';
import { Steps } from 'antd';

const { Step } = Steps;

const stepStyle = {
  marginBottom: 60,
  boxShadow: '0px -1px 0 0 #e8e8e8 inset',
};

export default class Demo extends React.Component {
  state = { current: 0, }


  render() {
    const { current } = this.state;
    return (
      <div>
        <Steps type="navigation" size="small" current={current} onChange={current => { this.setState({ current }) }} style={stepStyle} >
          <Step title="步骤 1" subTitle="00:00:05" status="finish" description="This is a description." />
          <Step title="步骤 2" subTitle="00:01:02" status="process" description="This is a description." />
          <Step title="步骤 3" subTitle="waiting for longlong time" status="wait" description="This is a description." />
        </Steps>

        <Steps type="navigation" current={current} onChange={current => { this.setState({ current }) }} style={stepStyle}>
          <Step status="finish" title="步骤 1" />
          <Step status="process" title="步骤 2" />
          <Step status="wait" title="步骤 3" />
          <Step status="wait" title="步骤 4" />
        </Steps>

        <Steps type="navigation" size="small" current={current} onChange={current => { this.setState({ current }) }} style={stepStyle} >
          <Step status="finish" title="finish 1" />
          <Step status="finish" title="finish 2" />
          <Step status="process" title="current process" />
          <Step status="wait" title="wait" disabled />
        </Steps>
      </div>
    );
  }
}
